﻿@{
    Layout = null;
    ViewBag.Title = "添加收货地址";
    var shipping = ViewData["shipping"] as Pay.DTO.shipping_dto;
    if (shipping == null) {
        shipping = new shipping_dto();
    }
    var url = Pay.H5.site.img_url;
}
<html>

<head>
    <meta charset="UTF-8">
    <title>添加新地址</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="msapplication-tap-highlight" content="no">
    <link href="~/Content/css/reset.css" rel="stylesheet" />
    <link href="~/Content/css/swiper.min.css" rel="stylesheet" />
    <link href="~/Content/css/gelunbu.css" rel="stylesheet" />
    <link href="~/Content/css/mobileSelect.css" rel="stylesheet" />
    <link href="~/Content/css/picker.css" rel="stylesheet" />
    <style type="text/css">
        .uploadimg {
            width: 138px;
            margin: 0 auto;
        }

        .img-box {
            /*margin-top: 40px;*/
        }

            .img-box .up-p {
                margin-bottom: 20px;
                font-size: 16px;
                color: #555;
            }

        .z_photo {
            /*padding: 18px;*/
            /*border:2px dashed #E7E6E6;*/
            /*padding: 18px;*/
            margin-left: 10px;
        }

            .z_photo .z_file {
                position: relative;
            }

        .z_file .file {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 100;
        }

        .z_photo .up-section {
            position: relative;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        .up-section .close-upimg {
            position: absolute;
            top: 6px;
            right: 8px;
            display: none;
            z-index: 10;
        }

        .up-section .up-span {
            display: block;
            width: 100%;
            height: 100%;
            visibility: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 9;
            background: rgba(0,0,0,.5);
        }

        .up-section:hover {
            border: 2px solid #f15134;
        }

            .up-section:hover .close-upimg {
                display: block;
            }

            .up-section:hover .up-span {
                visibility: visible;
            }

        .z_photo .up-img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .loading {
            border: 1px solid #D1D1D1;
            background: url(../img/loading.gif) no-repeat center;
        }

        .up-opcity {
            opacity: 0;
        }

        .img-name-p {
            display: none;
        }

        .upimg-div .up-section {
            width: 138px;
            height: 78px;
        }

        .img-box .upimg-div .z_file {
            width: 138px;
            height: 78px;
        }

        .z_file .add-img {
            display: block;
            width: 138px;
            height: 78px;
        }
        /*é®ç½©å±‚æ ·å¼*/
        .mask {
            z-index: 1000;
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4);
        }

            .mask .mask-content {
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -40%;
                margin-top: -80px;
                background: white;
                height: 160px;
                text-align: center;
            }

                .mask .mask-content .del-p {
                    color: #555;
                    height: 94px;
                    line-height: 94px;
                    font-size: 18px;
                    border-bottom: 1px solid #D1D1D1;
                }

        .mask-content .check-p {
            height: 66px;
            line-height: 66px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
        }

            .mask-content .check-p span {
                width: 49%;
                display: inline-block;
                text-align: center;
                color: #d4361d;
                font-size: 18px;
            }

        .check-p .del-com {
            border-right: 1px solid #D1D1D1;
        }
		.address-save{
			display: block; width: 80%; height: 40px; 
			line-height: 40px; text-align: center; border: none; 
			margin: 30px auto;background: #D0021B; color:#fff; 
			font-size:16px; border-radius:4px;
		}
    </style>
</head>

<body style="background: #F0F0F0;">
    <div class="address">
        <form action="" method="post">
            <div class="addr_group">
                <label for="" class="addr_lab">收货人:</label>
                <input type="text" name="" id="shipto" value="@shipping.ship_to" placeholder="请填写真实姓名" class="addr_ipt" />
            </div>

            <div class="addr_group">
                <label for="" class="addr_lab">手机号码:</label>
                <input type="text" name="" id="phone" value="@shipping.phone" placeholder="请填写手机号码" class="addr_ipt" />
            </div>

            <div class="addr_group">
                <label for="" class="addr_lab">所在地区:</label>
                <!--<input type="text"  name="" onclick="picker3();" id="nowValue" value="" placeholder="请选择所在地区" class="addr_ipt" />-->
                <a href="javascript:;" id="nowValue" onclick="picker3();" style="color: #333; font-size: 14px; padding-left: 10px;">@(string.IsNullOrEmpty(shipping.region_name) ? "省 / 市 / 区" : shipping.region_name)</a>
            </div>

            <div class="addr_group">
                <label for="" class="addr_lab">详细地址:</label>
                <input type="text" name="" id="address" value="@shipping.address" placeholder="请填写详细地址" class="addr_ipt" />
            </div>
        </form>

        <p class="addr_slogin">海外直邮商品需要提供收货人身份证信息及身份证照片用于办理清关手续。</p>

        <div class="addr_tit">
            身份信息（必填）
        </div>

        <div class="addr_sf">
            <div class="sf_group">
                <input type="text" name="" id="real_name" value="@shipping.real_name" placeholder="真实姓名" />
            </div>

            <div class="sf_group">
                <input type="text" name="" id="id_card" value="@shipping.id_card" placeholder="身份证号码" />
            </div>
        </div>

        <div class="addr_tit">
            身份证照片（选填）
        </div>

        <div class="upImg">
            <ul class="upImg-contain">
                <li>
                    <!--上传图片-->
                    <div class="uploadimg">
                        <div class="img-box full">
                            <section class=" img-section">
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="@(string.IsNullOrEmpty(shipping.card_positive)?"/Content/images/dizhi_sfzzm@2x.png":url+shipping.card_positive)" class="add-img forward_img">
                                        <input type="file" name="file" class="file forward_file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                                    </section>
                                </div>
                            </section>
                        </div>
                    </div>
                    <p style="padding-left:10px; width:100%;">身份证正反面照片(点击上传)</p>
                </li>
                <li>
                    <!--上传图片-->
                    <div class="uploadimg">
                        <div class="img-box full">
                            <section class=" img-section">
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="@(string.IsNullOrEmpty(shipping.card_negative)?"/Content/images/dizhi_sfzzm@2x.png":url+shipping.card_negative)" class="add-img back_img">
                                        <input type="file" name="file" class="file back_file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                                    </section>
                                </div>
                            </section>
                        </div>
                    </div>
                    <p style="padding-left:10px; width:100%;">身份证正反面照片(点击上传)</p>
                </li>
            </ul>

            <div class="reminder">
                温馨提示：请上传原始比例的身份证正反面，请勿裁剪涂改，保证身份证信息清晰显示，否则无法通过审核
            </div>
            <a href="javascript:;" onclick="add_address()" class="add_car address-save">保存</a>
        </div>
    </div>
    <input type="hidden" id="img_1" value="" />
    <input type="hidden" id="img_2" value="" />

    <script src="~/Content/js/jquery-3.2.1.min.js"></script>
    <script src="~/Content/js/mobileSelect.min.js"></script>
    <script src="~/Content/js/picker.js"></script>
    <script src="~/Content/js/city.js"></script>
    <script src="~/Content/js/imgUp.js"></script>
    <script src="~/Content/js/layer/1.9.3/layer.js"></script>
    <script src="~/Content/js/web.js"></script>
    <script type="text/javascript">
        var region_id = '@shipping.region_id';
        $(document).ready(function () {
			ajax({
				url:"/User/Regions",
				data:{},
				actions:"data",
				open_load:false
			});
        });
        function picker3() {
            var nowValue = document.getElementById('nowValue');
            new Picker({
                "title": ' ', //标题(可选)
                "defaultValue": nowValue.innerText, //默认值-多个以空格分开（可选）
                "data": cityDatas, //数据(必传)
                "keys": {
                    "id": "id",
                    "value": "name",
                    "childData": "children" //最多3级联动
                }, //数组内的键名称(必传，id、text、data)
                "callBack": function (val, name) {
                    //回调函数（val为选择的值）
                    nowValue.text = val;
                    region_id = name;
                }
            });
        }

        function add_address() {
            var data = {
                shipto: $("#shipto")[0].value,
                address: $("#address")[0].value,
                phone: $("#phone")[0].value,
                id_card: $("#id_card")[0].value,
                card_negative: '@shipping.card_negative',
                card_positive: '@shipping.card_positive',
                real_name: $("#real_name")[0].value,
                region_id: region_id
            }
            var card_positive = $('#img_1').val();
            var card_negative = $('#img_2').val();
            if (card_positive != undefined && card_positive!="")
                data.card_positive = card_positive;
            if (card_negative != undefined && card_negative != "")
                data.card_negative = card_negative;

            if (data.phone == "" || data.real_name == "" ||
				data.id_card == "" || data.shipto == "" ||
				data.address=="" || data.card_negative == ""||
				data.card_positive =="") {
                layer.msg("个人信息必须填写");
				return;
            }

			ajax({
				url:"/User/SubmitAddress",
				data:data,
				actions:"redirect",
				redirect:document.referrer,
				success_msg:"添加成功",
				fail_msg:"添加失败"
			});
		}
    </script>
</body>

</html>